# Window load event คู่มือการใช้งานเหตุการณ์ load บน Window ใน JavaScript

> JavaScript Window: load event เหตุการณ์โหลดจะเกิดขึ้นเมื่อโหลดหน้าทั้งหมดแล้ว รวมถึงทรัพยากรที่เกี่ยวข้องทั้งหมด เช่น สไตล์ชีต

Full URL: https://www.topvery.com/blog/article.Windowloadeventคู่มือการใช้งานเหตุการณ์loadบนWindowในJavaScript.BLO251102225503.Dev Developer
Base URL: https://www.topvery.com/

---

## Window load event คู่มือใช้งาน

 อธิบายวิธีใช้เหตุการณ์ load บนวัตถุ Window ในเบราว์เซอร์ รวมถึงความหมาย วิธีใช้งาน และตัวอย่างคำสั่ง JavaScript   window load event, JavaScript load event, DOM load event, เว็บ API, event listener load เรียนรู้เกี่ยวกับเหตุการณ์ load บน JavaScript ที่ถูกส่งออกเมื่อหน้าเว็บโหลดเสร็จทั้งหมด รวมถึงทรัพยากรต่าง ๆ อย่างภาพ และ iframe

## ความหมายของ load event

เหตุการณ์ load บน JavaScript จะถูกส่งออกเมื่อหน้าเว็บโหลดเสร็จทั้งหมด รวมถึงไฟล์ CSS สคริปต์ (async, defer, module), iframe และภาพอื่น ๆ. :contentReference[oaicite:2]{index=2}

## เมื่อใดควรใช้ load event

หากโค้ดของคุณต้องการให้แน่ใจว่า “ทรัพยากรทั้งหมด” โหลดเสร็จสมบูรณ์แล้ว เช่นภาพหรือ iframe ถึงจะเริ่มทำงาน ควรใช้ window.addEventListener("load", …) :contentReference[oaicite:3]{index=3}

## ตัวอย่างการใช้งาน JavaScript

window.addEventListener("load", (event) => {
console.log("page is fully loaded");
}); 

หรือแบบเก่า:

window.onload = (event) => {
console.log("page is fully loaded");
}; 
## 

## ความแตกต่างระหว่าง DOMContentLoaded และ load

เหตุการณ์ DOMContentLoaded จะถูกส่งออกเมื่อโดมโหลดและวิเคราะห์แล้ว แต่ load จะรอจนทุกทรัพยากรโหลดเสร็จด้วย :contentReference[oaicite:5]{index=5}

## คำแนะนำและข้อควรระวัง

* ไม่ควรใช้ load ถ้าโค้ดของคุณเพียงต้องการโต้ตอบกับ DOM ทันทีหลังวิเคราะห์ เพราะจะช้ากว่า DOMContentLoaded
* ตรวจสอบว่าโค้ดที่ลงทะเบียน load listener ไม่ถูกวางหลังเหตุการณ์ load เกิดแล้ว เพราะอาจไม่ถูกเรียก